<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ko">
<head>
<title>기본 예제</title>
<meta name="class-lists" content="jindo.Calendar"/>
<meta name="screenshots" content=""/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="description" content="가장 기본적인 사용 예제입니다.">
<link rel="stylesheet" type="text/css" href="../asset/demo.css">
<style type="text/css">
.layer { display:none; }
.layer-show { display:block; }
#layer {position:absolute; width:195px; z-index:99999;}
#layer {width:195px;padding-bottom:9px;border:1px solid #777;background:#ffffff;}
#layer div{margin-bottom:10px;padding:7px 0 9px 0px;text-align:center;background:#f6f6f6; vertical-align:top;}
#layer div button {border: 0 none; cursor: pointer; margin 0; padding:0;}
#layer div button span {display:none;}
#layer div .calendar-btn-prev-year{position:absolute;top:7px;left:5px;width:20px;height:18px;font:11px dotum; white-space:nowrap; letter-spacing:-1px;}
#layer div .calendar-btn-prev-mon{position:absolute;top:7px;left:38px;width:20px;height:18px;font:11px dotum; white-space:nowrap; letter-spacing:-1px;}
#layer div .calendar-title{float:none !important;font-family:verdana;font-size:12px;color:#383838;}
#layer div .calendar-btn-next-mon{position:absolute;top:7px;left:130px;width:20px;height:18px;font:11px dotum; white-space:nowrap; letter-spacing:-1px;}
#layer div .calendar-btn-next-year{position:absolute;top:7px;left:163px;width:20px;height:18px;font:11px dotum; white-space:nowrap; letter-spacing:-1px;}
#layer table{width:175px;margin:0 auto;text-align:center;}
#layer table *{font-family:tahoma !important;font-size:10px;}
#layer table td{width:25px;height:16px;text-align:center;color:#000000;}
#layer table td a{display:block;height:15px;padding-top:1px;color:#000000;}
#layer table td a:hover{background:#edf4fe;color:#6d6d6d;text-decoration:none !important;font-family:tahoma !important;}
#layer table td a:visited,
#layer table td a:active{color:#000000;text-decoration:none !important;}
#layer table .calendar-selected{background:#edf4fe;color:#6d6d6d;}
#layer table .calendar-selected a{color:#6d6d6d;text-decoration:none;}
#layer table .calendar-sun{color:#e82828;}
#layer table .calendar-sun a,
#layer table .calendar-sun a:visited,
#layer table .calendar-sun a:hover,
#layer table .calendar-sun a:active{color:#e82828 !important;}
#layer table .calendar-today{background:#6595db;color:#ffffff;}
#layer table .calendar-today a{font-weight:bold;text-decoration:none;color:#fff}
#layer table .calendar-today a:hover,
#layer table .calendar-today a:visited,
#layer table .calendar-today a:active{background:#6595db;color:#fff}
#layer table .calendar-prev-mon .calendar-date,
#layer table .calendar-next-mon .calendar-date {display:none}
#layer table .calendar-noselect span{background:none !important;color:#d1d1d1 !important;}
#layer table .calendar-sun span{background:none !important;color:#eca9a9 !important;}	
</style>
</head>
<body>
<script type="text/javascript" src="../asset/demojs/demo.js#header"
     data-title="Jindo Component"
     data-subtitle="=document.title"
     data-backbutton="false"
     data-viewsource="false"
     data-qrcode="true"></script>
	
<div class="demo">
	<div id="layer" class="layer"> <!-- 기준 엘리먼트 -->
		<div>
			<a href="#" class="rollover calendar-btn-prev-year">이전년</a> <!-- 이전년 버튼 (생략가능) -->
			<a href="#" class="rollover calendar-btn-prev-mon">이전달</a> <!-- 이전달 버튼 (생략가능) --> 
			<strong class="calendar-title"></strong> <!-- 달력의 타이틀 (생략가능) -->
			<a href="#" class="rollover calendar-btn-next-mon">다음달</a> <!-- 다음달 버튼 (생략가능) -->
			<a href="#" class="rollover calendar-btn-next-year">다음년</a> <!-- 다음년 버튼 (생략가능) -->
		</div>
		<table cellspacing="0" cellpadding="0">
			<thead>
				<tr>
					<th class="sun">S</th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th class="sat">S</th>
				</tr>
			</thead>
			<tbody>
				<tr class="calendar-week"> <!-- 달력의 한 주에 해당하는 엘리먼트 컨테이너 -->
					<td class="calendar-date"></td> <!-- 날짜가 표시될 엘리먼트 -->
					<td class="calendar-date"></td>
					<td class="calendar-date"></td>
					<td class="calendar-date"></td>
					<td class="calendar-date"></td>
					<td class="calendar-date"></td>
					<td class="calendar-date"></td>
				</tr>
			</tbody>
		</table>
		</div>
	</div>
</div>

<script type="text/javascript" charset="utf-8" src="../../asset/jindo.desktop.all.ns.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.Component.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.UIComponent.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.Calendar.js"></script>
<script type="text/javascript">
	var oCalendar = new jindo.Calendar('layer');
	jindo.$Element(oCalendar.getBaseElement()).addClass('layer-show');
</script>
<script type="text/javascript" src="../asset/demojs/demo.js#footer"></script>
</body>
</html>